<template>
  <div>
    <div class="list">
      <el-card class="box-card1">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
          <el-form-item label="站点名称">
            <el-select v-model="formInline.regionName" clearable>
              <el-option v-for="item in regionNameArry" :key="item.id" :label="item.regionName" :value="item.regionName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用单位名称">
            <el-input v-model="formInline.useOrgName"></el-input>
          </el-form-item>
          <el-form-item label="设备注册代码">
            <el-input v-model="formInline.eleCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="gettableData" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card" style="margin-top:15px">
        <div slot="header" class="clearfix">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <p>
              <!-- 任务数量:<span style="color:red;margin:0 5px">1</span>  -->
              使用单位数量:<span style="color:red;margin:0 5px">{{useOrgTotal}}</span>承保电梯总数:<span style="color:red;margin:0 5px">{{eleTotal}}</span>
            </p>
            <p> <el-button size="small" @click="showAddDetail" type="primary">新增电梯</el-button>
              <el-button size="small" type="danger" @click="getDelete">解绑</el-button>
            </p>

          </div>

        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" ref="multipleTable" @row-click="clickRow" @selection-change="handleSelectionChange" :cell-style="cellStyle">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="设备注册代码" prop="eleCode">
          </el-table-column>
          <el-table-column prop="regionName" label="分配站点">
          </el-table-column>
          <el-table-column prop="useOrgName" label="单位名称" width="320">
          </el-table-column>
          <el-table-column prop="eleUseCommunity" label="详细地址" width="320">
          </el-table-column>
          <el-table-column prop="eleUseInnerno" label="内部编号" width="120">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
          :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
        </el-pagination>
      </el-card>
    </div>
    <el-dialog title="站点任务添加" :visible.sync="dialogVisible" width="90%" :before-close="handleClose">
      <div style="display:flex;justify-content: space-between;">
        <el-card style="width:34% ">
          <el-form :model="form" :inline="true" :rules="rules" ref="form">
            <el-form-item label="站点名称" required prop="regionName">
              <el-select v-model="form.regionName" placeholder="请选择" clearable>
                <el-option v-for="item in regionNameArry" :key="item.id" :label="item.regionName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="width:64% ">
          <el-form :model="form" :inline="true">
            <el-form-item label="使用单位名称" label-width="100px">
              <el-input v-model="form.useOrgName" autocomplete="off" size='small'></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <div style="display:flex;justify-content: space-between;margin-top:15px">
        <div style="width:34% ">
          <el-card>
            <p style="line-height: 30px;font-weight: 800;font-size:16px">按使用单位查询电梯</p>
            <el-table :data="userData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
              <el-table-column label="单位" width="300" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button type='text' @click="selectOrg(scope.row.useOrgName)">
                    {{scope.row.useOrgName}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="梯数" prop="eleTotal">
              </el-table-column>

            </el-table>
            <el-pagination @size-change="usehandleSizeChange" @current-change="usehandleCurrentChange" :current-page.sync="usepagination.pageNum"
              :page-size="usepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="usepagination.pageTotal">
            </el-pagination>
          </el-card>
        </div>
        <div style="width:64%">
          <el-card>
            <p style="line-height: 30px;font-weight: 800;font-size:16px">电梯信息</p>
            <el-table :data="eleData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55" :selectable="selectable">
              </el-table-column>
              <el-table-column label="设备注册代码" prop="eleCode" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="regionName" label="维保站点名称" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="useOrgName" label="单位名称" width="240" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="eleUseCommunity" label="详细地址" show-overflow-tooltip>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="elehandleSizeChange" @current-change="elehandleCurrentChange" :current-page.sync="elepagination.pageNum"
              :page-size="elepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="elepagination.pageTotal">
            </el-pagination>
          </el-card>

        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="onAdd('form')">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getselectMaintRegionEleList, selectMaintRegionList, getselectAddMaintRegionEleList, getAddMaintRegionEle, getdeleteMaintRegionEle } from '@/api/scheme'
export default {
  components: {

  },
  data () {
    return {
      rules: {
        regionName: [
          { required: true, message: '请选择站点名称', trigger: 'change' }
        ]
      },
      eleTotal: '',
      useOrgTotal: '',
      multipleSelection: [],
      multipleSelection1: [],
      title: '',
      regionNameArry: [],
      formLabelWidth: '120px',
      form: {},
      dialogVisible: false,
      activeName: 'first',
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      elepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      usepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
      },
      userData: [],
      eleData: [

      ],
      tableData: []
    }
  },
  mounted () {
    this.gettableData()
    this.getregionNameArry()
  },
  methods: {
    // 删除任务
    getDelete () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否确认删除选中的任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.eleCode
          })
          const params = {
            eleCodes: query
          }
          getdeleteMaintRegionEle(params).then(res => {
            if (res.data.code == '200') {
              this.gettableData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.data.msg
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择任务'
        })
      }
    },
    selectable (row, index) {
      if (!row.regionName) {
        return true
      }
    },
    cellStyle () {
      return "cursor:pointer"
    },
    //获取站点下拉框
    getregionNameArry () {
      const params = {
        pageNum: 1,
        pageSize: 0,
      }
      selectMaintRegionList(params).then(res => {
        if (res.data.code == 200) {
          this.regionNameArry = res.data.data.list
        }
      })
    },
    // 点击使用单位列表
    selectOrg (useOrgName) {
      const query = {
        regionName: this.form.regionName,
        useOrgName: useOrgName,
        orgPageNum: this.usepagination.pageNum,
        orgPageSize: this.usepagination.pageSize,
        elePageNum: this.elepagination.pageNum,
        elePageSize: this.elepagination.pageSize,
      }
      getselectAddMaintRegionEleList(query).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.userData = res.data.data.usePage.list
          this.usepagination.pageTotal = res.data.data.usePage.total
          this.eleData = res.data.data.elePage.list
          this.elepagination.pageTotal = res.data.data.elePage.total
        }
      })
    },
    // 获取表格数据
    gettableData () {
      const query = {
        useOrgName: this.formInline.useOrgName,
        eleCode: this.formInline.eleCode,
        regionName: this.formInline.regionName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      getselectMaintRegionEleList(query).then(res => {
        if (res.data.code == 200) {
          this.eleTotal = res.data.data.eleTotal
          this.useOrgTotal = res.data.data.useOrgTotal
          this.tableData = res.data.data.page.list
          this.pagination.pageTotal = res.data.data.page.total
        }
      })
    },
    clickRow (row, column, event) {
      // console.log(row)
      //   选已选中数据中判断当前点击的是否被选中
      if (this.multipleSelection[0] == row) {  // 选中的是已有的 取消选中
        this.multipleSelection = []
        this.$refs.multipleTable.clearSelection()
      } else {
        this.multipleSelection = [row]
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSelectionChange1 (val) {
      this.multipleSelection1 = val
    },
    search () {
      this.usepagination.pageNum = 1
      this.elepagination.pageNum = 1
      this.getAddTableData()
    },
    //获取新增电梯数据
    getAddTableData () {
      const query = {
        useOrgName: this.form.useOrgName,
        orgPageNum: this.usepagination.pageNum,
        orgPageSize: this.usepagination.pageSize,
        elePageNum: this.elepagination.pageNum,
        elePageSize: this.elepagination.pageSize,
      }
      getselectAddMaintRegionEleList(query).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.userData = res.data.data.usePage.list
          this.usepagination.pageTotal = res.data.data.usePage.total
          this.eleData = res.data.data.elePage.list
          this.elepagination.pageTotal = res.data.data.elePage.total
        }
      })
    },
    onAdd (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.multipleSelection1.length > 0) {
            let query = this.multipleSelection1.map((item) => {
              return item.eleCode
            })
            const params = {
              eleCodes: query,
              regionId: this.form.regionName
            }
            getAddMaintRegionEle(params).then(res => {
              console.log(res)
              this.gettableData()
            })
            this.handleClose()
          } else {
            this.$message({
              type: 'info',
              message: '请选择电梯'
            })
          }

        } else {
          this.$message({
            message: '请选择要绑定的站点',
            type: 'warning'
          })
          return false
        }
      })

    },
    // // 关闭弹框
    handleClose () {
      this.$refs.form.resetFields()
      this.form = {}
      this.dialogVisible = false
    },
    // 展示弹框
    showAddDetail () {
      this.dialogVisible = true
      this.getAddTableData()
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData ()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData ()
    },
    usehandleSizeChange (val) {
      this.usepagination.pageNum = 1
      this.usepagination.pageSize = val
      this.getAddTableData()
    },
    usehandleCurrentChange (val) {
      this.usepagination.pageNum = val
      this.getAddTableData()
    },
    elehandleSizeChange (val) {
      this.elepagination.pageNum = 1
      this.elepagination.pageSize = val
      this.getAddTableData()
    },
    elehandleCurrentChange (val) {
      this.elepagination.pageNum = val
      this.getAddTableData()
    },
  }
}

</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
::v-deep .el-dialog__body {
  padding: 0px 20px;
}
.el-card {
  .el-form {
    ::v-deep .el-form-item__label {
      font-weight: 800;
    }
  }
}
.list {
  .clearfix {
    font-weight: bold;
  }

  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }
}
</style>
